<template>

	<image src="/static/homekf.png" mode="" class="wapperkf"
		:style="{ width: `${diameter}px`, height: `${diameter}px`, top: `${top}px`, left: `${left}px` }"
		@touchmove.prevent="touchmove" @touchend="touchend" @touchcancel="touchcancel" :animation="ballAnimation"
		@tap="kf"></image>


</template>

<script>
import { openkf } from '@/utils/kf';
	
	export default {
		name: "lang",
		data() {
			return {
				diameter: 0,
				top: 50,
				left: 0,
				isMove: false,
				ballAnimation: {},
				timeout: null,
				modile: {},
				puposhow: true
			};
		},
		
		computed: {
			
		},
		created() {
			let _this = this;
			_this.modile = uni.getSystemInfoSync();
			_this.top = _this.modile.safeArea.height - 280;
			_this.left = _this.modile.safeArea.width;
			_this.diameter = _this.modile.screenHeight / 15;
			let create = uni.createAnimation({
				duration: 400,
				timingFunction: 'ease-in'
			});
			create.translate('-100%').step();
			setTimeout(() => {
				// _this.left = _this.modile.safeArea.width
				create.translate('-50%').step();
				_this.ballAnimation = create.export();
			}, 0)

		},
		methods: {
			kf(){
				openkf()
			},
			onTap() {
				let _this = this;
				let x = '0';
				if (2 * _this.left >= _this.modile.safeArea.width) {
					x = '-100%';
				}
				let create = uni.createAnimation({
					duration: 0
				});
				create.translate(x).step();
				_this.ballAnimation = create.export();
				_this.overBall();
				_this.onClickHover()
			},
			touchmove(e) {
				let _this = this;
				_this.isMove = true;
				if (_this.timeout != null) {
					clearTimeout(_this.timeout);
					_this.timeout = null;
				}
				var touch = e.touches[0] || e.changedTouches[0];
				_this.left = touch.clientX;
				_this.top = touch.clientY;
			},
			touchend(e) {
				let _this = this;
				if (!_this.isMove) {
					return;
				}
				_this.finish(e);
			},
			touchcancel(e) {
				let _this = this;
				if (!_this.isMove) {
					return;
				}
				_this.finish(e);
			},
			finish(e) {
				let _this = this;
				_this.isMove = false;
				var touch = e.touches[0] || e.changedTouches[0];
				_this.left = touch.clientX;
				_this.top = touch.clientY;
				let x = '0';
				if (2 * _this.left + _this.diameter >= _this.modile.safeArea.width) {
					_this.left = _this.modile.safeArea.width;
					x = '-100%';
				} else {
					_this.left = _this.modile.safeArea.left;
				}
				if (_this.top > _this.modile.safeArea.height + _this.modile.safeAreaInsets.bottom) {
					_this.top = _this.modile.safeArea.height + _this.modile.safeAreaInsets.bottom;
				} else if (_this.top < -_this.diameter / 2) {
					_this.top = -_this.diameter / 2;
				}
				let create = uni.createAnimation({
					duration: 0
				});
				console.log(x)
				create.translate(x).step();
				_this.ballAnimation = create.export();
				_this.overBall();
			},
			overBall() {
				let _this = this;
				_this.timeout = setTimeout(() => {
					_this.timeout = null;
					let create = uni.createAnimation({
						duration: 400,
						timingFunction: 'ease-in'
					});
					create.translate('-50%').step();
					_this.ballAnimation = create.export();
				}, 1200);
			},

			open(a) {
				// #ifdef APP-PLUS
				plus.runtime.openURL(encodeURI(a))
				// #endif
				// #ifdef H5

				window.location.href = a
				// #endif

			}
		}
	}
</script>

<style lang="scss" scoped>
	.wapperkf {
		width: 77rpx;
		height: 77rpx;
		z-index: 9999999;
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 130rpx;
	}
</style>